<template>
  <el-upload ref="upload"
             v-loading.fullscreen.lock="loading"
             :action="myaction"
             :headers="myHeaders"
             :data="data"
             :multiple="multiple"
             :name="name"
             :drag="drag"
             :dragger="dragger"
             :with-credentials="withCredentials"
             :show-file-list="false"
             :accept="accept"
             :type="type"
             :before-upload="handlerBeforeUpload"
             :before-remove="handlerBeforeRemove"
             :on-remove="handlerRemove"
             :on-change="handlerChange"
             :on-preview="handlerPreview"
             :on-success="handlerSuccess"
             :on-progress="handlerProgress"
             :on-error="handlerError"
             :auto-upload="autoUpload"
             :list-type="listType"
             :http-request="httpRequest"
             :disabled="disabled"
             :limit="limit"
             :on-exceed="handlerExceed">
    <slot>
      <el-button slot="trigger"
                 size="small"
                 :icon="myChooseFile.icon"
                 type="primary">{{$t(myChooseFile.label)}}</el-button>
      <el-button v-if="!autoUpload"
                 style="margin-left: 10px;"
                 size="small"
                 type="success"
                 :icon="myUploadFile.icon"
                 @click="hanlderSubmitUpload">
        {{$t(myUploadFile.label)}}</el-button>
    </slot>
  </el-upload>
</template>

<script>
export default {
  props: {
    action: {
      type: String,
      default() {
        return `/api/Data/Upload`;
      },
    },
    target: String,
    operation: String,
    multiple: {
      type: Boolean,
      default: true,
    },
    name: {
      type: String,
      default: "uploadfile",
    },
    load: {
      type: Boolean,
      default: false,
    },
    autoUpload: {
      type: Boolean,
      default: true,
    },
    data: Object,
    drag: Boolean,
    dragger: Boolean,
    chooseFile: {
      type: Object,
    },
    showFileList: {
      type: Boolean,
      default: true,
    },
    uploadFile: Object,
    withCredentials: {
      type: Boolean,
      default: false,
    },
    headers: Object,
    accept: String,
    type: {
      type: String,
      default: "select",
    },
    listType: {
      type: String,
      default: "text", // text,picture,picture-card
    },
    httpRequest: Function,
    disabled: Boolean,
    limit: {
      type: Number,
      default: 5,
    },
  },
  data() {
    return {
      loading: false,
    };
  },
  computed: {
    myaction() {
      return `${this.$http.getApi()}${this.action}`;
    },
    // 请求header
    myHeaders() {
      let headers = this.headers || {};
      console.log(headers);

      return headers;
    },
    // 选择文件按钮的相关配置
    myChooseFile() {
      let chooseFile = this.chooseFile || {};

      chooseFile.icon = chooseFile.icon || "el-icon-upload";
      chooseFile.label = chooseFile.label || "上传";

      return chooseFile;
    },
    // 上传文档按钮的相关配置
    myUploadFile() {
      let uploadFile = this.uploadFile || {};

      uploadFile.icon = uploadFile.icon || "";
      uploadFile.label = uploadFile.label || "上传";

      return uploadFile;
    },
  },
  methods: {
    hanlderSubmitUpload() {},
    handlerBeforeUpload() {},
    handlerBeforeRemove() {},
    handlerRemove() {},
    handlerChange() {},
    handlerPreview() {},
    handlerProgress() {
      if (this.load) {
        this.loading = true;
      }
    },
    handlerExceed() {},
    handlerError(err, file, fileList) {
      this.loading = false;
      this.$emit("on-error", err, file, fileList);
    },
    handlerSuccess(response, file, fileList) {
      this.loading = false;
      this.$emit("on-success", response, file, fileList);
    },
  },
  mounted() {},
};
</script>

<style >
.project-list-header {
  line-height: 30px !important;
}
</style>
